<template>
  <div :style="{ background: '#f0f2f5' }">
    <main>
      <img
        :src="logo"
        alt="logo"
        width="200"
        height="200"
        @click="$router.replace('/')"
      />
      <p class="chat">微信扫码关注『 程序员小舟 』登录</p>
      <img :src="weChat_gz" alt="公众号二维码" width="260" height="260" />
      <div :style="{ width: '260px', margin: '24px auto 15px' }">
        <a-form :model="formState" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
          <a-form-item
            name="code"
            :rules="codeRule"
            required
          >
            <a-input
              v-model:value="formState.code"
              size="large"
              placeholder="请输入动态码（6位）"
              :disabled="loading"
              :maxlength="6"
            >
              <template #prefix>
                <qrcode-outlined :style="{ color: '#1890ff' }" />
              </template>
              <template #addonAfter>
                <a-tooltip title="进入公众号，点一键登录获取动态码">
                  <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
                </a-tooltip>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              block
              size="large"
              :loading="loading"
              html-type="submit"
              >提 交</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </main>
    <footer>
      <Footer />
    </footer>
  </div>
</template>

<script setup>
import Footer from "../components/Footer.vue";
import logo from "../assets/logo.png";
import weChat_gz from "../assets/weChat_gz.jpg";
import { QrcodeOutlined, InfoCircleOutlined } from "@ant-design/icons-vue";
import { toRefs, reactive } from "vue";

let data = reactive({
  loading: false,
  formState: {
    code: "",
  },
  codeRule:[{ required: true, message: '验证码是必填项！' },{ pattern: '^[A-Za-z0-9]{6}$',message: '验证码格式错误！',trigger: 'blur' }]
});

let { formState, loading,codeRule } = toRefs(data);

function onFinish (values) {
    console.log(values);
}

function onFinishFailed (errorInfo) {
    console.log(errorInfo);
}

</script>

<style scoped>
main {
  text-align: center;
  min-height: calc(100vh - 54px);
}
main img[alt="logo"] {
  cursor: pointer;
}
main .chat {
  width: fit-content;
  margin: 0px auto 15px;
  font-size: 1rem;
  color: #1890ff;
  padding-bottom: 10px;
  border-bottom: 2px solid #1890ff;
}
footer {
  min-height: 54px;
}
</style>